/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/21 4:10 下午
 * @version V1.0
 */
import React from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { Button, Form, Input, Table, Select } from 'antd';
import moment from 'moment';

const options = [
    {
        key: 0,
        value: '待付款',
    },
    {
        key: 1,
        value: '待发货',
    },
    {
        key: 2,
        value: '已发货',
    },
    {
        key: 3,
        value: '已收货',
    },
    {
        key: 4,
        value: '已完成',
    },
    {
        key: -1,
        value: '退货申请',
    },
    {
        key: -2,
        value: '退款中',
    },
    {
        key: -3,
        value: '退款完成',
    },
    {
        key: -4,
        value: '已关闭',
    },
    // {
    //     key: -5,
    //     value: '撤销申请',
    // },
    // {
    //     key: 101,
    //     value: '待成团',
    // },
    // {
    //     key: 201,
    //     value: '备货中',
    // },
    // {
    //     key: 202,
    //     value: '待付尾款',
    // },
];
const { Option } = Select;
const OrderList = ({ OrderList: { dataSource, keyword, limit, offset, order_status }, dispatch, loading }) => {
    const [form] = Form.useForm();
    const search = () => {
        form.validateFields().then(values => {
            const { keyword, order_status } = values;
            dispatch({
                type: 'OrderList/getOrderList',
                payload: {
                    keyword,
                    limit,
                    offset,
                    order_status,
                },
            });
        });
    };
    const empty = () => {
        form.resetFields();
        dispatch({
            type: 'OrderList/getOrderList',
            payload: {
                keyword: '',
                limit: 10,
                offset: 0,
                order_status: '',
            },
        });
    };
    const searchByOffset = (offset) => {
        dispatch({
            type: 'OrderList/getOrderList',
            payload: {
                keyword,
                limit,
                offset: offset - 1,
                order_status
            },
        });
    };
    const columns = [
        {
            title: '商品',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <img style={{ width: '40px', height: '40px', marginRight: '10px' }}
                             src={item.carts_info[0].thumbnail} alt=""/>
                        {item.carts_info[0].pname}
                    </div>
                );
            },
        },
        {
            title: '订单编号',
            dataIndex: 'order_id',
            align: 'left',
        },
        {
            title: '支付金额',
            dataIndex: 'pay_price',
            align: 'left',
        },
        {
            title: '收货人',
            align: 'left',
            render: (item) => item.address_info.name,
        },
        {
            title: '收货人地址',
            align: 'left',
            render: (item) => item.address_info.address_detail,
        },
        {
            title: '联系方式',
            align: 'left',
            render: (item) => item.address_info.phone,
        },
        {
            title: '订单状态',
            dataIndex: 'order_status',
            align: 'left',
            render: (order_status) => options.filter((item) => item.key === order_status)[0].value,
        },
        {
            title: '创建时间',
            dataIndex: 'created_time',
            align: 'left',
            render: (created_time) => moment(created_time).format('YYYY-MM-DD hh:mm:ss'),
        },
        // {
        //     title: '操作',
        //     align: 'left',
        //     render: (item) => {
        //         return (
        //             <div>
        //                 null
        //             </div>
        //         );
        //     },
        // },
    ];
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerFilter}>
                <Form
                    layout="inline"
                    form={form}
                >
                    <Form.Item
                        label="关键字"
                        name="keyword"
                    >
                        <Input placeholder="请输入商品名称、订单号、手机号、购买人"/>
                    </Form.Item>
                    <Form.Item
                        label="订单状态"
                        name="order_status"
                    >
                        <Select
                            placeholder="请选择订单状态"
                        >
                            {
                                options.map(item => <Option key={item.key} value={item.key}>{item.value}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" style={{ marginRight: '16px' }} onClick={search}>查询</Button>
                        <Button type="primary" onClick={empty}>清空</Button>
                    </Form.Item>
                </Form>
            </div>
            <div className={styles.pageContainerTable}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='order_id' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource.list}
                    pagination={{
                        total: dataSource.total,// 总记录数
                        defaultPageSize: 10, // 默认显示条数
                        showQuickJumper: true, // 快速跳转
                        // showSizeChanger: true, // 一页展示数据条数
                        onChange: (offset) => searchByOffset(offset),
                        showTotal: () => {
                            return `共${dataSource.total}条`;
                        },
                    }}
                />
            </div>
        </div>
    );
};

export default connect(({ OrderList, dispatch, loading }) => ({
    OrderList,
    dispatch,
    loading: loading.effects['OrderList/getOrderList'],
}))(OrderList);
